<template>

    <div id='myCollect'>
        <div class='filter-container'>
            <el-radio-group @change='changeTypeHandler' v-model='queryParams.type'>
                <el-radio label='competition'>比赛</el-radio>
                <el-radio label='works'>作品</el-radio>
            </el-radio-group>

            <div class='msg-container'>
                <!--                <div class='header-info'>-->
                <!--                    <el-form :model='queryParams' @keydown.enter.prevent='queryHandler'>-->
                <!--                        <el-input clearable @clear='queryHandler' placeholder='搜索' v-model='queryParams.title' />-->
                <!--                    </el-form>-->
                <!--                </div>-->


                <!--        作品列表-->
                <div v-if='list.length' class='competition-list'>
                    <div v-for='item in list' :key='`${item.dataId}-${item.type}`' @click='goHandler(item)'
                         class='competition-item'>
                        <img class='cover' src='@/assets/images/login-background.jpg' alt='cover'>
                        <div class='main-content'>
                            <div class='top'>
                                {{ item?.data?.title || '标题' }}
                            </div>
                            <div class='bottom'>
                                <div class='count-info'>
                                    <div class='count'>
                                        <img src='@/assets/index/look.png' alt='look'>
                                        <span>{{ handleCount(item?.data?.views) || 0 }}</span>
                                    </div>
                                    <div class='count'>
                                        <img src='@/assets/index/collect.png' alt='collect'>
                                        <span>{{ handleCount(item?.data?.collect) || 0 }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-else class='empty'>暂无收藏</div>


                <div class='pagination'>
                    <pagination
                        v-show='total > 0'
                        v-model:limit='queryParams.pageSize'
                        v-model:page='queryParams.pageNum'
                        :total='total'
                        layout='total, prev, pager, next'
                        @pagination='getList'
                    />
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang='ts'>
import { reactive, ref, toRefs } from 'vue';
import { handleCount } from '@/utils/sk';
import { getMyCollect } from '@/api/business/collect';
import { Collect } from '@/api/model/Collect';
import { useRouter } from 'vue-router';

const total = ref(0);
const list = ref<Collect[]>([]);
/*请求参数定义*/
const data = reactive({
    form: {},
    queryParams: { pageNum: 1, pageSize: 4, title: '', type: 'competition' }
});
const { form, queryParams } = toRefs(data);
const router = useRouter();
/*获取我收藏的列表*/
const getList = () => {
    getMyCollect(queryParams.value).then(res => {
        list.value = res.rows;
        total.value = res.total;
    });
};
const changeTypeHandler = () => {
    queryParams.value.pageNum = 1;
    getList();
};
/*查询*/
const queryHandler = () => {
    queryParams.value.pageNum = 1;
    getList();
};
/*前往*/
const goHandler = (item: Collect) => {
    if (item.type === 'works') {
        router.push(`/worksDetail/${item.dataId}?judgeIds=${item.data.judgeIds}`);
    } else if (item.type === 'competition') {
        router.push(`/competitionDetail/${item.dataId}?judgeIds=${item.data.judgeIds}`);
    }
};
getList();
</script>
<style scoped lang='scss'>
.msg-container {
    border: 1px solid #efefef;
    padding: 20px;
    min-height:450px;
    .header-info {
        display: flex;
        align-items: center;
        justify-content: space-between;

        :deep(.el-input__wrapper) {
            box-shadow: none;
            background: #F2F6FC;
        }
    }
}

.competition-list {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;

    .count-info {
        display: flex;
    }

    .top {
        @include ellipsisOption(2);
    }

    .bottom {
        display: flex;
        justify-content: space-between;

        .count {
            display: flex;

            img {
                margin-right: 6px;
            }

            &:first-child {
                margin-right: 20px;
            }
        }
    }

    .competition-item {
        background: #F2F6FC;
        border-radius: 4px;
        display: flex;
        width: calc(50% - 54px);
        margin-right: 108px;
        padding: 10px;
        margin-bottom: 10px;
        cursor: pointer;

        .status {
            font-size: 14px;
            font-weight: 400;
            color: #E6A23C;
        }

        &:nth-child(2n) {
            margin-right: 0;
        }

        .cover {
            width: 100px;
            height: 100px;
            border-radius: 4px;
        }
    }

    .main-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 6px 0;
        margin-left: 10px;
    }
}

</style>
